<template>
  <q-dialog v-model="inDisplay">
    <q-card style="width: 75%; min-width: 300px">
      <q-card-section>
        <div class="row items-center">
          <div class="text-h6">编辑角色</div>
          <q-space/>
          <q-btn flat round icon="clear" v-close-popup/>
        </div>
      </q-card-section>
      <q-card-section>
        <div v-if="info && characterData">
          <div class="row q-col-gutter-md">
            <div class="col-12">
              <q-card flat bordered>
                <div>
                  <q-img :src="info.banner"/>
                </div>
                <div>
                  <div class="row">
                    <div class="col-xs-4 col-sm-3 col-md-2 offset-1">
                      <q-img :src="info.avatar"
                             style="margin-top: -40%; border: #FFFFFF 4px solid; border-radius: 4px"/>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col offset-1">
                      <div class="text-h6 text-bold">
                        {{ info.name }}
                        <q-icon :name="`img: img/position/${info.position}.png`" size="md"/>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div style="height: 8px"/>
                  </div>
                </div>
              </q-card>
            </div>
            <div class="col-12" v-if="!teamMode">
              <q-card flat bordered>
                <q-card-section>
                  <div class="row q-col-gutter-sm">
                    <div class="col-12">
                      <q-select label="Rank"
                                emit-value
                                map-options
                                :options="maxRankList"
                                v-model="characterData.rank"/>
                    </div>
                    <div class="col-12">
                      <q-select label="星级"
                                emit-value
                                map-options
                                :options="starList"
                                v-model="characterData.star"/>
                    </div>
                    <div class="col-12">
                      <div class="row q-col-gutter-md">
                        <div v-for="(item, key) in info.rank[characterData.rank - 1].equipmentList"
                             :key="key"
                             class="col-6">
                          <div style="width: 72px; height: 72px; margin: 0 auto">
                            <div class="relative-position">
                              <q-img class="absolute-top" :src="item.icon"
                                     :ratio="1"
                                     width="72px"
                                     @click="characterData.equipment[key] = false"/>
                              <q-img class="absolute-top" src="img/character/add.png"
                                     width="72px"
                                     v-show="!characterData.equipment[key]"
                                     @click="characterData.equipment[key] = true"/>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-12">
                      <q-input label="专武" type="number" v-model.number="characterData.weapon"/>
                    </div>
                  </div>
                </q-card-section>
              </q-card>
            </div>
            <div class="col-12" v-else>
              <q-card flat bordered>
                <q-card-section>
                  <div class="row q-col-gutter-md">
                    <div class="col-12 text-h6">
                      Rank
                      <q-toggle v-model="askForRank"/>
                    </div>
                    <div class="col-12" v-if="askForRank && info">
                      <div class="row q-col-gutter-sm">
                        <div class="col-2">
                          <q-input type="number"
                                   v-model.number="minRankRange"
                                   @blur="rankRange = {
                                     min: (rankRange.min < 1) ? 1 : rankRange.min,
                                     max: (rankRange.max > (info.rank.length || 11)) ? (info.rank.length || 11) : rankRange.max
                                   }, rankRange = {
                                     min: (rankRange.min > rankRange.max) ? rankRange.max : rankRange.min,
                                     max: rankRange.max
                                   }"
                                   dense/>
                        </div>
                        <div class="col-8">
                          <q-range :value="rankRange"
                                   @change="val => { rankRange = val }"
                                   :min="1"
                                   :max="info.rank.length || 11"
                                   :step="1" drag-range label markers snap/>
                        </div>
                        <div class="col-2">
                          <q-input type="number"
                                   v-model.number="maxRankRange"
                                   @blur="rankRange = {
                                     min: (rankRange.min < 1) ? 1 : rankRange.min,
                                     max: (rankRange.max > (info.rank.length || 11)) ? (info.rank.length || 11) : rankRange.max
                                   }, rankRange = {
                                     min: rankRange.min,
                                     max: (rankRange.min > rankRange.max) ? rankRange.min : rankRange.max
                                   }"
                                   dense/>
                        </div>
                      </div>
                    </div>
                    <div class="col-12 text-h6">
                      星级
                      <q-toggle v-model="askForStar"/>
                    </div>
                    <div class="col-12" v-if="askForStar">
                      <div class="row q-col-gutter-sm">
                        <div class="col-2">
                          <q-input type="number"
                                   v-model.number="minStarRange"
                                   @blur="starRange = {
                                     min: (starRange.min < 1) ? 1 : starRange.min,
                                     max: (starRange.max > 5) ? 5 : starRange.max
                                   }, starRange = {
                                     min: (starRange.min > starRange.max) ? starRange.max : starRange.min,
                                     max: starRange.max
                                   }"
                                   dense/>
                        </div>
                        <div class="col-8">
                          <q-range :value="starRange"
                                   @change="val => { starRange = val }"
                                   dense
                                   :min="1"
                                   :max="5"
                                   :step="1" drag-range label markers snap/>
                        </div>
                        <div class="col-2">
                          <q-input type="number"
                                   v-model.number="maxStarRange"
                                   @blur="starRange = {
                                     min: (starRange.min < 1) ? 1 : starRange.min,
                                     max: (starRange.max > 5) ? 5 : starRange.max
                                   }, starRange = {
                                     min: starRange.min,
                                     max: (starRange.min > starRange.max) ? starRange.min : starRange.max
                                   }"
                                   dense/>
                        </div>
                      </div>
                    </div>
                    <div class="col-12 text-h6"
                         v-if="characterData.rank && characterData.rank[0] === characterData.rank[1]">
                      装备
                      <q-toggle v-model="askForEquipment"/>
                    </div>
                    <div class="col-12"
                         v-if="characterData.rank && characterData.rank[0] === characterData.rank[1] && askForEquipment">
                      <div class="row q-col-gutter-md">
                        <div v-for="(item, key) in info.rank[characterData.rank[0] - 1].equipmentList"
                             :key="key"
                             class="col-6">
                          <div style="width: 72px; height: 72px; margin: 0 auto">
                            <div class="relative-position">
                              <q-img class="absolute-top" :src="item.icon"
                                     :ratio="1"
                                     width="72px"
                                     @click="$set(characterData.equipment, key, false)"/>
                              <q-img class="absolute-top" src="img/character/add.png"
                                     width="72px"
                                     v-show="!(characterData.equipment && characterData.equipment[key])"
                                     @click="$set(characterData.equipment, key, true)"/>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-12 text-h6">
                      专武
                      <q-toggle v-model="askForWeapon"/>
                    </div>
                    <div class="col-12" v-if="askForWeapon">
                      <div class="row q-col-gutter-sm">
                        <div class="col-2">
                          <q-input type="number"
                                   v-model.number="minWeaponRange"
                                   @blur="weaponRange = {
                                     min: (weaponRange.min < 1) ? 1 : weaponRange.min,
                                     max: (weaponRange.max > weaponMax) ? weaponMax : weaponRange.max
                                   }, weaponRange = {
                                     min: (weaponRange.min > weaponRange.max) ? weaponRange.max : weaponRange.min,
                                     max: weaponRange.max
                                   }"
                                   dense/>
                        </div>
                        <div class="col-8">
                          <q-range :value="weaponRange"
                                   @change="val => { weaponRange = val }"
                                   :min="1"
                                   :max="weaponMax"
                                   :step="1" drag-range label markers snap/>
                        </div>
                        <div class="col-2">
                          <q-input type="number"
                                   v-model.number="maxWeaponRange"
                                   @blur="weaponRange = {
                                     min: (weaponRange.min < 1) ? 1 : weaponRange.min,
                                     max: (weaponRange.max > weaponMax) ? weaponMax : weaponRange.max
                                   }, weaponRange = {
                                     min: weaponRange.min,
                                     max: (weaponRange.min > weaponRange.max) ? weaponRange.min : weaponRange.max
                                   }"
                                   dense/>
                        </div>
                      </div>
                    </div>
                  </div>
                </q-card-section>
              </q-card>
            </div>
            <div class="col-12" v-if="remove">
              <q-card flat>
                <div class="row">
                  <q-btn class="full-width" color="red" label="删除角色" @click="onRemoveCharacterEvent"/>
                </div>
              </q-card>
            </div>
          </div>
        </div>
        <div class="row q-col-gutter-md" v-else-if="!info">
          <div class="col-12 text-center text-body1">
            载入失败，请检查您的网络连接是否良好！
          </div>
        </div>
        <div class="row q-col-gutter-md" v-else>
          <div class="col-12 text-center text-body1">
            载入中，请稍候……
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>


<script>
import {extend} from 'quasar';

export default {
  name: 'EditCharacter',
  data: () => {
    return {
      inDisplay: false,
      characterData: null,
      weaponMax: 130
    };
  },
  props: {
    display: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    },
    info: {
      type: Object
    },
    remove: {
      type: Boolean,
      default: true
    },
    removeMsg: {
      type: String
    },
    teamMode: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'display',
    event: 'doChangeDisplay'
  },
  watch: {
    display(v) {
      this.inDisplay = v;
    },
    inDisplay(v) {
      this.$emit('doChangeDisplay', v);
    },
    data: {
      handler: function (v) {
        this.characterData = v;
      },
      deep: true
    },
    characterData: {
      handler: function (v) {
        if (v) {
          const data = extend(true, v, {});
          this.$emit('update', this.teamMode ? {id: this.info.id, filter: data} : data);
        }
      },
      deep: true
    }
  },
  computed: {
    maxRankList: {
      get() {
        if (!this.info) return [1]
        let r = 1;
        let list = [];
        for (const i of this.info.rank) {
          list.unshift({
            label: `Rank${r}`,
            value: r
          });
          r++;
        }
        if (this.teamMode) list = [{
          label: '(无限制)',
          value: -1
        }, ...list]
        return list;
      }
    },
    starList: {
      get() {
        let list = [];
        for (let i = 1; i <= 5; i++) {
          list.push({
            label: `${i}星`,
            value: i
          })
        }
        if (this.teamMode) list = [{
          label: '(无限制)',
          value: -1
        }, ...list]
        return list;
      }
    },
    rankRange: {
      get() {
        if (!this.info) return {min: 0, max: 0};
        if (!this.characterData.rank) return {min: 1, max: 1};
        return {
          min: this.characterData.rank[0] || 1,
          max: this.characterData.rank[1] || 1
        };
      },
      set(v) {
        // const min = (v.min < 1) ? 1 : (v.min > v.max) ? v.max : v.min;
        // const max = (v.max > this.info.rank.length) ? this.info.rank.length : (v.min > v.max) ? v.min : v.max;
        this.characterData.rank = [v.min, v.max];
        if (v.min !== v.max) this.askForEquipment = false;
      }
    },
    minRankRange: {
      get () { return this.rankRange.min },
      set (v) { this.rankRange = { min: v, max: this.rankRange.max } }
    },
    maxRankRange: {
      get () { return this.rankRange.max },
      set (v) { this.rankRange = { min: this.rankRange.min, max: v } }
    },
    askForRank: {
      get() {
        if (this.characterData && this.characterData.rank) return true;
        return false;
      },
      set(v) {
        if (v) {
          this.$set(this.characterData, 'rank', [1, 1]);
        } else this.$delete(this.characterData, 'rank');
      }
    },
    starRange: {
      get() {
        if (!this.info || !this.characterData.star) return {min: 1, max: 5};
        return {
          min: this.characterData.star[0] || 5,
          max: this.characterData.star[1] || 5
        };
      },
      set(v) {
        // const min = (v.min < 1) ? 1 : (v.min > v.max) ? v.max : v.min;
        // const max = (v.max > 5) ? 5 : (v.min > v.max) ? v.min : v.max;
        this.characterData.star = [v.min, v.max];
      }
    },
    minStarRange: {
      get () { return this.starRange.min },
      set (v) { this.starRange = { min: v, max: this.starRange.max } }
    },
    maxStarRange: {
      get () { return this.starRange.max },
      set (v) { this.starRange = { min: this.starRange.min, max: v } }
    },
    askForStar: {
      get() {
        if (this.characterData && this.characterData.star) return true;
        return false;
      },
      set(v) {
        if (v) {
          this.$set(this.characterData, 'star', [1, 5]);
        } else this.$delete(this.characterData, 'star');
      }
    },
    askForEquipment: {
      get() {
        if (this.characterData && this.characterData.equipment) return true;
        return false;
      },
      set(v) {
        if (v) {
          this.$set(this.characterData, 'equipment', [false, false, false, false, false, false]);
        } else this.$delete(this.characterData, 'equipment');
      }
    },
    weaponRange: {
      get() {
        if (!this.info || !this.characterData.weapon) return {min: 1, max: 1};
        return {
          min: this.characterData.weapon[0] || 1,
          max: this.characterData.weapon[1] || 1
        };
      },
      set(v) {
        // const min = (v.min < 1) ? 1 : (v.min > v.max) ? v.max : v.min;
        // const max = (v.max > this.weaponMax) ? this.weaponMax : (v.min > v.max) ? v.min : v.max;
        this.characterData.weapon = [v.min, v.max];
      }
    },
    minWeaponRange: {
      get () { return this.weaponRange.min },
      set (v) { this.weaponRange = { min: v, max: this.weaponRange.max } }
    },
    maxWeaponRange: {
      get () { return this.weaponRange.max },
      set (v) { this.weaponRange = { min: this.weaponRange.min, max: v } }
    },
    askForWeapon: {
      get() {
        if (this.characterData && this.characterData.weapon) return true;
        return false;
      },
      set(v) {
        if (v) {
          this.$set(this.characterData, 'weapon', [0, 0]);
        } else this.$delete(this.characterData, 'weapon');
      }
    }
  },
  methods: {
    onRemoveCharacterEvent() {
      this.$q.dialog({
        title: '确认删除',
        message: this.removeMsg || `确认要删除<strong>${this.info.name}</strong>的角色数据吗？你保存的信息都将丢失！`,
        html: true,
        cancel: true,
        persistent: true
      }).onOk(() => {
        this.$emit('remove', this.info.id);
      })
    }
  },
  async mounted() {
    try {
      const {data} = await this.$axios.get('data/main.json');
      if (data && data.weapon) this.weapon = data.weapon;
    } catch {
    }
  }
}
</script>
